import PropTypes from 'prop-types'
import React, { memo, useState } from 'react'
import { TabsWrapper } from './style'
import classNames from 'classnames'
import ScrollView from '@/base-ui/scroll-view'

const SectionTabs = memo(props => {
  const { tabNames = [], tabClick } = props
  const [currentIndex, setCurrentIndex] = useState(0)
  function itemClickHandle(index, name) {
    setCurrentIndex(index)
    tabClick(index, name)
  }

  return (
    <TabsWrapper>
      {tabNames && (
        <ScrollView>
          {tabNames.map((item, index) => {
            return (
              <div
                className={classNames('item', { active: index === currentIndex })}
                key={index}
                onClick={() => itemClickHandle(index, item)}
              >
                {item}
              </div>
            )
          })}
        </ScrollView>
      )}
    </TabsWrapper>
  )
})

SectionTabs.propTypes = {
  tabNames: PropTypes.array,
  tabClick: PropTypes.func
}

export default SectionTabs
